<template>
  <div>
    <!--输入框-->
    <div class="row top">
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
      <div class="col-md-10 col-lg-10 col-sm-10">
        <div class="form-group">
          <input type="text"  class="input-sm" placeholder="输入手机号" >
          <span>&#8195&#8195</span>
          <input type="button" value="查询" class="btn btn-success">
          <span>&#8195&#8195</span>
        </div>
      </div>
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
    </div>
    <!--表格-->
    <div class="row">
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
      <div class="col-md-10 col-lg-10 col-sm-10">
        <table class="table table-bordered table-hover" >
          <thead>
          <tr  class="text-danger">
            <th class="text-center">手机号</th>
            <th class="text-center">验证码</th>
            <th class="text-center">验证时间日期</th>
          </tr>
          </thead>
          <tbody>
          <tr class="text-center active">
            <td>13956162945</td>
            <td>dgfdgfhgfjhghjghjgfgjghj</td>
            <td>50</td>
          </tr>
          <tr class="text-center success">
            <td>2</td>
            <td>djhdgjgdhjhdjdgghjgdj</td>
            <td>16</td>
          </tr>
          <tr class="text-center info">
            <td>3</td>
            <td>xjhgcccccccccccc</td>
            <td>16</td>
          </tr>
          <tr class="text-center warning">
            <td>4</td>
            <td>f</td>
            <td>16</td>
          </tr>
          <tr class="text-center danger">
            <td>4</td>
            <td>f</td>
            <td>16</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
      <!--分页-->
      <div class="pagination-box text-center">
        <paginate
          :page-count="_self.pages"
          :click-handler="clickCallback"
          :prev-text="'上一页'"
          :next-text="'下一页'"
          :container-class="'pagination'">
        </paginate>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'remember',
    data () {
      return {
        items: [],
        user: {},
        pages: 0,
        curIndex: 1,
        pageSize: 5,
        isActive: false
      }
    },
    methods: {
      clickCallback: function (pageNum) {
        let _self = this
        _self.curIndex = pageNum
        console.log(pageNum)
      }
    }
  }
</script>
<style></style>
